<template>
  <section class="vbox">
    <section class="w-f-md">
      <section class="hbox stretch bg-black dker">
        <!-- side content -->
        <aside class="col-sm-3 no-padder" id="sidebar">
          <section class="vbox animated fadeInUp">
            <section class="scrollable" v-if='type=="singer"'>
              <div class="m-t-n-xxs item pos-rlt">
                <div class="top text-right">
                  <span class="musicbar bg-success bg-empty inline m-r-lg m-t loading" style="width:25px;height:30px">
                    <span class="bar1 a3 lter"></span>
                    <span class="bar2 a5 lt"></span>
                    <span class="bar3 a1 bg"></span>
                    <span class="bar4 a4 dk"></span>
                    <span class="bar5 a2 dker"></span>
                  </span>
                </div>
                <div class="bottom gd bg-info wrapper-lg">
                  <span
                    class="pull-right text-sm text-warning">Music:{{singerPlayList.musicSize}} <br>MV:{{singerPlayList.mvSize}} <br>Album:{{singerPlayList.albumSize}}</span>
                  <span class="h2 font-thin text-danger">{{singerPlayList.name}}</span>
                </div>
                <img class="img-full" v-lazy="singerPlayList.picUrl" alt="...">
              </div>
              <ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                <li class="list-group-item" v-for='(item,index) in playList.hotSongs' @click='playMusic(item,index)'
                    :class='{"text-danger":Indexs==index&&routeId==$route.params.id}'>
                  <div class="pull-right m-l">
                    <a class="m-r-sm">
                      <i class="icon-plus"></i>
                    </a>
                    <a>
                      <i class="icon-close"></i>
                    </a>
                  </div>
                  <div style='width:12px;' class="jp-play-me m-r-sm pull-left">
                    <span>{{index + 1}}</span>
                  </div>
                  <a class="jp-play-me m-r-sm pull-left">
                    <i v-if='playing&&Indexs==index&&routeId==$route.params.id'
                       class="icon-control-pause text-danger"></i>
                    <i v-else class="icon-control-play"></i>
                  </a>
                  <div class="clear text-ellipsis">
                    <span>{{item.name}}</span>
                    <span> -- [{{item.al.name}}]</span>
                  </div>
                </li>
              </ul>
            </section>
            <section class="scrollable" v-if='type=="songList"'>
              <div class="m-t-n-xxs item pos-rlt">
                <div class="top text-right">
                  <span class="musicbar bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
                    <span class="bar1 a3 lter"></span>
                    <span class="bar2 a5 lt"></span>
                    <span class="bar3 a1 bg"></span>
                    <span class="bar4 a4 dk"></span>
                    <span class="bar5 a2 dker"></span>
                  </span>
                </div>
                <div class="bottom gd bg-info wrapper-lg">
                  <span class="h2 text-danger font-thin">{{leftNavDataPlaylist.name}}</span>
                </div>
                <img class="img-full" v-lazy="leftNavDataPlaylist.coverImgUrl" alt="...">
              </div>
              <ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                <li class="list-group-item" v-for='(item,index) in leftNavDataPlaylist.tracks'
                    @click='playMusic(item,index)' :class='{"text-danger":Indexs==index&&routeId==$route.params.id}'>
                  <div class="pull-right m-l">
                    <a class="m-r-sm">
                      <i class="icon-plus"></i>
                    </a>
                    <a>
                      <i class="icon-close"></i>
                    </a>
                  </div>
                  <div style='width:12px;' class="jp-play-me m-r-sm pull-left">
                    <span>{{index + 1}}</span>
                  </div>
                  <a class="jp-play-me m-r-sm pull-left">
                    <i v-if='playing&&Indexs==index&&routeId==$route.params.id'
                       class="icon-control-pause text-danger"></i>
                    <i v-else class="icon-control-play"></i>
                  </a>
                  <div class="clear text-ellipsis">
                    <span>{{item.name}}</span>
                    <span> --- [{{item.ar[0].name}} - {{item.al.name}}]</span>
                  </div>
                </li>
              </ul>
            </section>
            <section class="scrollable" v-if='type=="highquality"'>
              <div class="m-t-n-xxs item pos-rlt">
                <div class="top text-right">
                  <span class="musicbar bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
                    <span class="bar1 a3 lter"></span>
                    <span class="bar2 a5 lt"></span>
                    <span class="bar3 a1 bg"></span>
                    <span class="bar4 a4 dk"></span>
                    <span class="bar5 a2 dker"></span>
                  </span>
                </div>
                <div class="bottom gd bg-info wrapper-lg">
                  <span class="h2 font-thin">{{highqualityPlaylist.name}}</span>
                </div>
                <img class="img-full" v-lazy="highqualityPlaylist.coverImgUrl" alt="...">
              </div>
              <ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                <li class="list-group-item" v-for='(item,index) in highqualityPlaylist.tracks'
                    @click='playMusic(item,index)' :class='{"text-danger":Indexs==index&&routeId==$route.params.id}'>
                  <div class="pull-right m-l">
                    <a class="m-r-sm">
                      <i class="icon-plus"></i>
                    </a>
                    <a>
                      <i class="icon-close"></i>
                    </a>
                  </div>
                  <div style='width:12px;' class="jp-play-me m-r-sm pull-left">
                    <span>{{index + 1}}</span>
                  </div>
                  <a class="jp-play-me m-r-sm pull-left">
                    <i v-if='playing&&Indexs==index&&routeId==$route.params.id'
                       class="icon-control-pause text-danger"></i>
                    <i v-else class="icon-control-play"></i>
                  </a>
                  <div class="clear text-ellipsis">
                    <span>{{item.name}}</span>
                    <span> --- [{{item.ar[0].name}} - {{item.al.name}}]</span>
                  </div>
                </li>
              </ul>
            </section>
            <section class="scrollable" v-if='type=="single"'>
              <div class="m-t-n-xxs item pos-rlt">
                <div class="top text-right">
                  <span class="musicbar bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
                    <span class="bar1 a3 lter"></span>
                    <span class="bar2 a5 lt"></span>
                    <span class="bar3 a1 bg"></span>
                    <span class="bar4 a4 dk"></span>
                    <span class="bar5 a2 dker"></span>
                  </span>
                </div>
                <img class="img-full" v-lazy="singleState.singerPic" alt="...">
              </div>
              <ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                <li class="list-group-item text-danger"
                    @click='playMusic()'>
                  <div class="pull-right m-l">
                    <a class="m-r-sm">
                      <i class="icon-plus"></i>
                    </a>
                    <a>
                      <i class="icon-close"></i>
                    </a>
                  </div>
                  <div style='width:12px;' class="jp-play-me m-r-sm pull-left">
                    <span>1</span>
                  </div>
                  <a class="jp-play-me m-r-sm pull-left">
                    <i v-if='playing' class="icon-control-pause text-danger"></i>
                    <i v-else class="icon-control-play"></i>
                  </a>
                  <div class="clear text-ellipsis">
                    <span>{{singleState.name}}</span>
                    <span> --- [{{singleState.album}}]</span>
                  </div>
                </li>
              </ul>
            </section>
            <section class="scrollable" v-if='type=="billboard"'>
              <div class="m-t-n-xxs item pos-rlt">
                <div class="top text-right">
                  <span class="musicbar bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
                    <span class="bar1 a3 lter"></span>
                    <span class="bar2 a5 lt"></span>
                    <span class="bar3 a1 bg"></span>
                    <span class="bar4 a4 dk"></span>
                    <span class="bar5 a2 dker"></span>
                  </span>
                </div>
                <div class="bottom gd bg-info wrapper-lg">
                  <span class="h2 font-thin text-danger">{{billboardList.name}}</span>
                </div>
                <img class="img-full" v-lazy="billboardList.coverImgUrl" alt="...">
              </div>
              <ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                <li class="list-group-item" v-for='(item,index) in billboardList.tracks' @click='playMusic(item,index)'
                    :class='{"text-danger":Indexs==index&&routeId==$route.params.id}'>
                  <div class="pull-right m-l">
                    <a class="m-r-sm">
                      <i class="icon-plus"></i>
                    </a>
                    <a>
                      <i class="icon-close"></i>
                    </a>
                  </div>
                  <div style='width:12px;' class="jp-play-me m-r-sm pull-left">
                    <span>{{index + 1}}</span>
                  </div>
                  <a class="jp-play-me m-r-sm pull-left">
                    <i v-if='playing&&Indexs==index&&routeId==$route.params.id'
                       class="icon-control-pause text-danger"></i>
                    <i v-else class="icon-control-play"></i>
                  </a>
                  <div class="clear text-ellipsis">
                    <span>{{item.name}}</span>
                    <span> -- [{{item.artists[0].name}}]</span>
                  </div>
                </li>
              </ul>
            </section>
          </section>
        </aside>
        <!-- / side content -->
        <section class="col-sm-3 no-padder">
          <section class="vbox">
            <section style='width:100%;height:100%;'>
              <player :line-num='currentLineNum'></player>
            </section>
          </section>
        </section>
        <section class="col-sm-3 no-padder">
          <section class="vbox bg-clock ">
            <section class="scrollable" ref='scroll'>
              <div class='text-center allComment'>评论({{total}})</div>
              <section class="comment-list block" style='margin-top: 50px'>
                <div class='wonderful text-center'>精彩评论</div>
                <comment v-if='hotComments' :comment-data='hotComments'></comment>
                <div class='wonderful text-center'>最新评论</div>
                <comment v-if='commentList' :comment-data='commentList'></comment>
              </section>
            </section>
          </section>
        </section>
        <section class="col-sm-3 no-padder lt">
          <section class="vbox">
            <section class="scrollable hover">
              <div class="m-t-n-xxs">
                <div class="item pos-rlt">
                  <a class="item-overlay active opacity wrapper-md font-xs">
                    <span class="block h3 font-bold text-info">Find</span>
                    <span class="text-muted">Search the music you like</span>
                    <span class="bottom wrapper-md block">-
                      <i class="icon-arrow-right i-lg pull-right"></i>
                    </span>
                  </a>
                  <a>
                    <img class="img-full" src="../../../static/images/m40.jpg"
                         alt="...">
                  </a>
                </div>
                <div class="item pos-rlt">
                  <a class="item-overlay active opacity wrapper-md font-xs text-right">
                    <span class="block h3 font-bold text-warning text-u-c">Listen</span>
                    <span class="text-muted">Find the peace in your heart</span>
                    <span class="bottom wrapper-md block">
                      <i class="icon-arrow-right i-lg pull-left"></i> -</span>
                  </a>
                  <a>
                    <img class="img-full" src="../../../static/images/m41.jpg"
                         alt="...">
                  </a>
                </div>
                <div class="item pos-rlt">
                  <a class="item-overlay active opacity wrapper-md font-xs">
                    <span class="block h3 font-bold text-success text-u-c">Share</span>
                    <span class="text-muted">Share the good songs with your loves</span>
                    <span class="bottom wrapper-md block">-
                      <i class="icon-arrow-right i-lg pull-right"></i>
                    </span>
                  </a>
                  <a>
                    <img class="img-full" src="../../../static/images/m42.jpg"
                         alt="...">
                  </a>
                </div>
                <div class="item pos-rlt">
                  <a class="item-overlay active opacity wrapper-md font-xs text-right">
                    <span class="block h3 font-bold text-white text-u-c">2014</span>
                    <span class="text-muted">Find, Listen &amp; Share</span>
                    <span class="bottom wrapper-md block">
                      <i class="icon-arrow-right i-lg pull-left"></i> -</span>
                  </a>
                  <a>
                    <img class="img-full" src="../../../static/images/m44.jpg"
                         alt="...">
                  </a>
                </div>
                <div class="item pos-rlt">
                  <a class="item-overlay active opacity wrapper-md font-xs">
                    <span class="block h3 font-bold text-danger-lter text-u-c">Top10</span>
                    <span class="text-muted">Selected songs</span>
                    <span class="bottom wrapper-md block">-
                      <i class="icon-arrow-right i-lg pull-right"></i>
                    </span>
                  </a>
                  <a>
                    <img class="img-full" src="../../../static/images/m45.jpg"
                         tppabs="http://view.jqueryfuns.com/%E9%A2%84%E8%A7%88-/2015/9/24/d9a1d741ea198ce9f2e3d9bd8a3196f1/images/m45.jpg"
                         alt="...">
                  </a>
                </div>
              </div>
            </section>
          </section>
        </section>
      </section>
    </section>
    <footerPlay bgcolor='bg-black' :playing-lyric='playingLyric'></footerPlay>
    <loading v-show='active'></loading>
  </section>
</template>

<script>
  import {mapActions, mapGetters} from 'Vuex'
  import loading from '../loading/loading.vue'
  import player from '../player/player.vue'
  import footerPlay from '../player/footerPlay.vue'
  import comment from '../player/comment.vue'
  import Lyric from 'lyric-parser'

  export default {
    name: 'musicStateContent',
    components: {player, footerPlay, comment, loading},
    data() {
      return {
        playList: {},  //播放歌单
        singerPlayList: {}, //歌手信息
        highqualityPlaylist: {},//歌单信息
        leftNavDataPlaylist: {},  //我的歌单信息
        billboardList: {},  //排行榜歌单信息
        picUrl: '',//封面图片
        musicUrl: '',//音乐URL
        Indexs: null,    //判断点的是哪一首歌
        currentLyric: null,  //歌词
        hotComments: [],      //热门评论
        commentList: [], //评论列表
        total: null,     //总评论数
        scrolled: false, //滚动距离
        offset: 0,        //偏移
        id: null,          //歌曲id
        routeId: null,       //路由id
        currentLineNum: 0,  //当前歌词行数
        active: false,
        playingLyric: ''    //当前播放歌词
      }
    },
    created() {

      if (this.type == 'single') {
        this.playMusic();

      } else if (this.type == 'billboard') {
        this.billboardList = this.data.result;
      } else {
        this.getPlay();
      }

    },
    mounted() {
      this.routeId = this.$route.params.id;
      this.$refs.scroll.addEventListener('scroll', this.commentScroll)
    },
    computed: mapGetters([  //变量
      'uid',
      'data',
      'recommendSongs',
      'type',
      'leftNavData',
      'playing',
      'musicData',
      'currentIndex',
      'textIndex',
      'mode',
      'singleState',
      'paramsId'
    ]),
    methods: {
      commentScroll() {
//        当滚动的距离达到内容高度减去页面高度是请求接口
        this.scrolled = this.$refs.scroll.scrollTop;
        let scrollHeight = this.$refs.scroll.scrollHeight;
//        console.log(scrollHeight)
        if (this.scrolled == scrollHeight - 869) {
          this.offset++;
          this.getComment(this.offset)
        }
      },
      getPlay() {
        var vm = this;
        vm.playList = {};
        var songId = this.$route.params.id;
        if (this.type == 'singer') {
          var url = '/artists?id='
        } else if (this.type == 'highquality') {
          url = '/playlist/detail?id='
        }
        vm.active = true;
        this.$http.get(url + songId).then(function (res) {
          vm.playList = res.data;
          if (vm.type == 'singer') {
            vm.singerPlayList = vm.playList.artist
//            console.log(vm.singerPlayList)
          } else if (vm.type == 'highquality') {
            vm.highqualityPlaylist = vm.playList.playlist
          }
          vm.active = false;
        })
      },
      playMusic(item, index) {
        if (this.type != 'single') {
          if (this.type == 'billboard') {
            var musicData = {
              musicPic: item.album.picUrl,
              musicName: item.name,
              singerName: item.artists[0].name
            };
          } else {
            musicData = {
              musicPic: item.al.picUrl,
              musicName: item.name,
              singerName: item.ar[0].name
            };
          }
          this.id = item.id;
          this.Indexs = index;
        } else {
          var musicData = {
            musicPic: this.singleState.singerPic,
            musicName: this.singleState.name,
            singerName: this.singleState.singer
          };
          this.id = this.singleState.id;
        }

        var vm = this;

//        请求歌曲
        let url = '/music/url?id=' + vm.id;
        vm.active = true;
        this.$http.get(url).then(function (res) {
          vm.musicUrl = res.data.data[0].url;
          vm.$store.commit('setMusicUrl', {url: vm.musicUrl, data: musicData, index: vm.Indexs})
        })


//        请求歌词
        let lyricUrl = '/lyric?id=' + vm.id;
        this.$http.get(lyricUrl).then((res) => {
          if (res.data.lrc) {
            vm.currentLyric = new Lyric(res.data.lrc.lyric, vm.handleLyric)
//            if(vm.playing){
            vm.currentLyric.play()

//            }
            vm.$store.commit('playCurrentLyric', {currentLyric: vm.currentLyric})
          } else {
            vm.currentLyric = '纯音乐，无歌词'
          }
          vm.$store.commit('getLyric', vm.currentLyric)
          vm.active = false;
        }).catch(() => {
          this.currentLyric = null
          this.playingLyric = ''
          this.currentLineNum = 0
        })
        this.getComment(this.offset)

      },
      handleLyric({lineNum, txt}) {
        this.currentLineNum = lineNum
        this.playingLyric = txt
      },
      getComment(offset) {

        var vm = this;
        //      请求评论
        let commentUrl = '/comment/music?id=' + this.id + '&limit=' + 10 + '&offset=' + offset;
//        console.log(commentUrl)
        this.$http.get(commentUrl).then((res) => {
          if (offset == 0) {
            vm.total = res.data.total;
            vm.commentList = res.data.comments;
//            vm.commentList.id = id;
            vm.hotComments = res.data.hotComments;
//            vm.hotComments.id = id;
          } else {
//              console.log(vm.commentList)
//              console.log(res.data.comments)
            vm.commentList = vm.commentList.concat(res.data.comments)
//              vm.hotComments.id = id;
          }
        })
      },
      playFunc(item) {
        var listLength = item.length;
        if (this.mode == 1) {  //随机播放
          let index = Math.floor(Math.random() * listLength)
          this.playMusic(item[index], index);
        } else {   //顺序播放
          if (this.currentIndex == listLength) {
            this.playMusic(item[0], 0);
          } else if (this.currentIndex == 0) {
            this.playMusic(item[listLength], listLength);
          } else {
            this.playMusic(item[this.currentIndex], this.currentIndex);
          }
        }
      }
    },
    watch: {
//      判断currentIndex来实现上一曲 下一曲  但是带点击歌曲时会调用两次 通过第三个变量textIndex来控制
      textIndex() {
        if (this.type == "singer") {
          this.playFunc(this.playList.hotSongs);
        } else if (this.type == "songList") {
          this.playFunc(this.leftNavData.playlist.tracks)
        } else if (this.type == "highquality") {
          this.playFunc(this.playList.playlist.tracks)
        } else if (this.type == "billboard") {
          this.playFunc(this.billboardList.tracks)
        }

        if (this.currentLyric) {
          this.currentLyric.stop()
//          console.log(this.currentLyric.play)
        }
      },

      leftNavData() {
        this.leftNavDataPlaylist = this.leftNavData.playlist
      },
      paramsId() {
        this.routeId = this.paramsId;
      },

      currentIndex() {

      }
    }
  }
</script>
<style scoped>
  .bg-clock {
    background: #F8FFAE;
    background: -webkit-linear-gradient(-65deg, #43C6AC, #F8FFAE);
    background: linear-gradient(-65deg, #75ccba, #F8FFAE);
    -webkit-font-smoothing: antialiased;
    color: #788188;
  }

  .wonderful {
    height: 30px;
    line-height: 30px;
    background: rgb(22, 195, 147);
    margin-top: 5px;
  }

  .allComment {
    height: 40px;
    line-height: 40px;
    background: rgb(70, 130, 121);
    margin-bottom: 10px;
    color: wheat;
    position: fixed;
    width: 24.1%;
    z-index: 9;
  }

  .lick-click {
    float: right;
    margin-right: 15px;
  }
</style>
